<template>
	<view class="create">
		<view class="nav_bar" style="background: #F8F8F8;">
			<uni-nav-bar color="#333" left-icon="left" title="创建订单" :border='false' :fixed="true"
				background-color="#F8F8F8" @clickLeft="back"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="address flex_center" v-if="have_address" @click="$native.toChooseAddress()">
			<image :src="$util.prefix('store/address_icon.png')" class="icon"></image>
			<view class="content flex_center">
				<view class="left">
					<view class="top hidden_3">
						{{ address.province || '' }}-{{ address.city || '' }}-{{ address.district || '' }}-{{ address.address || '' }}
					</view>
					<view class="bottom">
						{{ address.real_name || '' }} {{ address.mobile || '' }}
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="24rpx" color="#9C9C9C"></u-icon>
				</view>
			</view>
		</view>

		<view class="address flex_center" v-else @click="$native.toChooseAddress()">
			<image :src="$util.prefix('store/address_icon.png')" class="icon"></image>
			<view class="content flex_center">
				<view class="left">
					<view class="top hidden_3">
						暂无地址
					</view>
					<view class="bottom">
						请先添加地址
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="24rpx" color="#9C9C9C"></u-icon>
				</view>
			</view>
		</view>

		<view class="door flex_r_between" @click="date_time_show = true" v-if="kefu == 1">
			<text>预约时间</text>
			<view class="flex_center">
				<view>{{ day }} {{ service_time }}</view>
				<u-icon name="arrow-right" size="28rpx" color="#9C9C9C"></u-icon>
			</view>
		</view>

		<view class="product-list">
			<scroll-view scroll-x="true" @scrolltolower="onReachProduct">
				<view class="box flex_center">
					<view class="product flex_center" v-for="(item,index) in product_list" :key="index"
						@click="product = item" :id="product.id == item.id ? 'select' : ''">
						<view class="image">
							<image :src="$util.getAvatar(item.goods_image)" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view class="name hidden_2">{{ item.name || '' }}</view>
							<view class="price flex_center">
								<i>￥</i>
								<text>{{ item.price || '' }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="technician" v-if="product.express_type == 2">
			<view class="content_title">选择服务人员</view>
			<scroll-view :scroll-x="true" @scrolltolower="onReach">
				<view class="list flex_center">
					<view class="item flex_c" v-for="(item,index) in list" :key="index" @click="provider_id = item.id"
						:id="provider_id == item.id ? 'select' : ''">
						<view class="avatar">
							<image :src="item.avatar" mode="aspectFill"></image>
							<view class="select flex_r_around">
								<u-icon name="checkbox-mark" size="28rpx" color="#FFF"></u-icon>
							</view>
						</view>
						<text class="nickname hidden">{{ item.nickname || '' }}</text>
						<text class="juli hidden">{{ item.distance_desc }}</text>
					</view>
					<view class="loading" v-if="total > list.length && total != 0">
						<u-loading-icon mode="semicircle" size="36rpx"></u-loading-icon>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="door flex_r_between">
			<text>收货方式</text>
			<view>{{ product.express_type == 1 ? '到店使用' : product.express_type == 2 ? '送货上门' : '快递邮寄' }}</view>
		</view>

		<!-- 	<view class="remark">
			<view class="title">订单备注</view>
			<view class="textarea">
				<textarea maxlength="200" v-model="remark" placeholder="请输入"
					placeholder-class="input-placeholder"></textarea>
				<view class="maxlength">{{remark.length}}/200</view>
			</view>
		</view> -->


		<view class="agreement">
			<view class="agreement-tab">
				<u-tabs :list="tab_list" @click="onTab" lineColor="#FD2A53" :activeStyle="{
					color: '#FD2A53',
					fontWeight: 'bold',
				}"></u-tabs>
			</view>
			
			<view class="sign-text" v-if="tab == 2">
				<view>
					下单须知：
				</view>
				<text>1.所有服务项目均有附近商家提供，感谢您选择和监督商家的服务质量，如有涉黄，欺诈等行为请投诉。</text>
				<text>2.接单后技师到达后需支付路费。路费需服务者实际出发的距离计算。</text>
				<text>3.下单流程</text>
				<text>（1）根据您的时间选择服务项目和服务者进行预约，</text>
				<text>（2）商家接单，安排技师出发，如有心脏病，高血压，高血脂，过量饮酒等用户不提供服务。</text>
				<text>（3）技师到达后，需支付技师的实际打车路费。</text>
				<text>（4）按摩服务中如有服务者向您提供黄赌毒违法行为请及时投诉等</text>
				<text>4.取消订单</text>
				<text>（1）下单后商家未接单前取消订单，不收取任何费用。</text>
				<text>（2）下单后，商家已接单，安排服务者已出发，无法取消订单。</text>
			</view>
			
			<textarea v-else :auto-height="true" class="agreement-content" v-model="order_notice"></textarea>
		</view>

		<!-- 2025.6.15 涂鹏说：只有按摩商品展示会员 出了事 他担着 -->
		<view class="btn_bottom flex_r_between"
			v-if="product.id && vip_status == 1 && product.kefu == 1 && circle_info.type == 3">
			<view class="left">
				<view class="top flex_center">
					<!-- <view class="text">会员支付:</view> -->
					<view class="price flex_center">
						<i>￥</i>
						<text>{{ (product.price * goods_discount).toFixed(2) || '0.00' }}</text>
						<image :src="$util.prefix('public/vip_tags.png')" mode="aspectFill"></image>
					</view>
					<!-- <text class="vip-text">已优惠{{ (product.price * (1 - goods_discount)).toFixed(2) }}</text> -->
				</view>

				<view class="bottom flex_center" @click="to_pay_show = true">
					<text>{{
						pay_type == 1 && use_card == 0 ? '微信支付' 
						: pay_type == 2 && use_card == 0 ? '支付宝支付'
						: use_card == 1 && pay_type == 0 ? '余额支付'
						: use_card == 1 && pay_type == 1 ? '余额+微信'
						: use_card == 1 && pay_type == 2 ? '余额+支付宝'
						: '组合支付'
					}}</text>
					<u-icon name="arrow-up" size="24rpx" color="#666666"></u-icon>
				</view>
			</view>

			<view class="right flex_r_around" @click="toPay">
				<text>立即支付</text>
			</view>
		</view>

		<!-- 2025.6.15 涂鹏说：只有按摩商品展示会员 出了事 他担着 -->
		<view class="btn_bottom flex_r_between" v-else>
			<view class="left">
				<view class="bottom flex_center" @click="to_pay_show = true">
					<text>支付方式:{{
						pay_type == 1 && use_card == 0 ? '微信' 
						: pay_type == 2 && use_card == 0 ? '支付宝'
						: use_card == 1 && pay_type == 0 ? '余额'
						: use_card == 1 && pay_type == 1 ? '余额+微信'
						: use_card == 1 && pay_type == 2 ? '余额+支付宝'
						: '组合支付'
					}}</text>
					<u-icon name="arrow-up" size="24rpx" color="#666666"></u-icon>
				</view>
			</view>

			<view class="right black flex_r_around" @click="$native.toBuyVip(circle_id)"
				v-if="product.kefu == 1 && circle_info.type == 3">
				<text>会员价￥{{ (product.price * goods_discount).toFixed(2) }}</text>
			</view>
			<view class="right flex_r_around" @click="toPay">
				<text>原价购￥{{ product.price || '' }}</text>
			</view>
		</view>

		<u-popup :show="show_dj" mode="center" @close="show_dj = false" bgColor="transparent"
			:safeAreaInsetBottom="false">
			<view class="dingjin">
				<view class="dj_icon flex_r_around">
					<image :src="$util.prefix('store/money_icon.png')"></image>
				</view>
				<view class="dj_content flex_c">
					<text class="dj_title">支付定金</text>
					<text class="dj_price">¥50.00</text>
					<text class="dj_text">
						本项目订单金额为{{ product.price || '0.00' }}元，下单定金为50元，技师到达后您需支付{{ (Number(product.price) - 50).toFixed(2) }}元+技师实际路费
					</text>
					<view class="dj_btn flex_r_between">
						<view class="b" @click="show_dj = false">取消</view>
						<view class="r" @click="onPay">确认支付</view>
					</view>
				</view>
			</view>
		</u-popup>

		<numberJpan :length="6" @closeChange="closeChange" :showNum="false" ref="numberPad"></numberJpan>

		<u-popup mode="bottom" :show="to_pay_show" @close="to_pay_show = false" bgColor="transparent"
			:safeAreaInsetBottom="false">
			<view class="to_pay_show flex_c">
				<view class="title">支付</view>
				<view class="price flex_center">
					<i>￥</i>
					<view class="flex_c" v-if="vip_status == 1">
						<text>{{ (product.price * goods_discount).toFixed(2) }}</text>
						<text
							style="font-size: 28rpx;color: #FD2A53;margin-top: 12rpx;">VIP优惠:{{ (product.price * (1-goods_discount)).toFixed(2) }}</text>
					</view>
					<text v-else>{{ product.price }}</text>
				</view>
				<view class="pay_type">
					<!-- <view class="item flex_r_between" @click="onchoosepay(1,1)">
						<view class="left flex_center">
							<image src="/static/generalization/wallet.png"></image>
							<text>购物卡</text>
						</view>
		
						<view class="right flex_center">
							<text>￥{{ card_balance }}</text>
							<image :src="`/static/public/select${use_card == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view> -->

					<view class="item flex_r_between" @click="onchoosepay(1,0)">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>

					<view class="item flex_r_between" @click="onchoosepay(2,0)">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
						</view>
					</view>

				</view>
				<view class="btn" @click="toPay">确认支付</view>
			</view>
		</u-popup>

		<u-datetime-picker :filter="filter" :formatter="formatter" :show="date_time_show" mode="datetime" :minMinute="0"
			:maxMinute="0" @close="date_time_show = false" @cancel="date_time_show = false" @confirm="onDateTime"
			:minDate="minDate" :maxDate="maxDate"></u-datetime-picker>

	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	import numberJpan from '@/components/numberJpan/numberJpan.vue';
	export default {
		components: {
			navBar,
			numberJpan
		},
		data() {
			return {
				have_address: false,
				address: {},

				remark: '',

				show_dj: false,


				goods_id: 0,
				provider_id: 0,
				type: 0,
				pay_type: 2,
				use_card: 0,
				store_id: 0,
				popularize_id: 0,
				kefu: 0,


				product: {},

				to_pay_show: false,


				showKeyBoard: false,

				card_balance: '0.00',

				pay_password: '',

				// 防连点
				flag: true,

				order_id: 0,

				circle_id: 0,

				date_time_show: false,

				minDate: 0,
				maxDate: 0,
				service_time: '',
				day: '',


				// 客服
				list: [],
				page: 1,
				total: 0,

				product_list: [],
				product_page: 1,
				product_total: 0,

				vip_status: 0,

				circle_info: {},

				goods_discount: 0,
				
				lat: '',
				lng: '',
				province: '',
				city: '',
				area: '',
				
				from_web: 0,
				
				tab_list: [{
					name: '下单须知',
					tab: 1,
				}, {
					name: '平台须知',
					tab: 2,
				}],
				tab: 1,
				
				order_notice: '',
			}
		},
		methods: {

			closeChange(e) {
				this.pay_password = e;
				this.onPay();
			},
			
			onTab(e){
				this.tab = e.tab;
			},

			getPrePay() {
				this.$post('/order/pre_order', {
					goods_id: this.goods_id,
					provider_id: this.provider_id,
					pay_type: this.pay_type,
					store_id: this.store_id,
					address_id: this.address.id || 0,
					kefu: this.kefu,
					circle_id: this.circle_id
				}).then(res => {
					this.product = res.data.goods_info;
				});
			},

			getAddress() {
				this.$get('/user_address/index', {
					page: 1
				}).then(res => {
					if (res.data.data.length) {
						this.address = res.data.data[0];
						this.have_address = true;
					}
					// this.getPrePay();
				})
			},

			onchoosepay(pay_type, use_card) {

				// 购物卡余额
				var blance = Number(this.card_balance);

				// 商品价格
				var price = Number(this.product.price);

				if (use_card == 1) {
					if (blance < price) {
						this.use_card = this.use_card == 1 ? 0 : use_card;
						this.pay_type = pay_type;
					} else {
						this.use_card = 1;
						this.pay_type = 0;
					}

				} else {
					if (blance < price) {
						this.pay_type = pay_type;
					} else {
						this.pay_type = pay_type;
						this.use_card = 0;
					}
				}

			},

			toPay() {
				this.to_pay_show = false;
				// if (this.product.kefu == 1) {
				// 	this.show_dj = true;
				// } else {
				this.onPay();
				// }
			},
			
			getToken(map) {
				var data = JSON.parse(map);
				uni.setStorageSync('token', data.token);
				uni.setStorageSync('cid', data.cid);
				uni.setStorageSync('terminal', data.terminal);
			},

			onPay() {
				if(!uni.getStorageSync('token')){
					return this.$native.getToken();
				}
				
				if (!this.flag) {
					return;
				}
				if (!this.address.id) {
					return this.$util.msg(`请选择${this.product.kefu == 1 ? '服务' : '收货'}地址`);
				}
				this.flag = false;
				uni.showLoading();
				
				setTimeout(()=>{
					uni.hideLoading();
				},6000)

				// var use_card = 0;
				// if (this.pay_type == 0 && this.use_card >= 1) {
				// 	var use_card = this.use_card;
				// } else if (this.pay_type == 1 && this.use_card >= 1) {
				// 	var use_card = 2;
				// } else if (this.pay_type == 2 && this.use_card >= 1) {
				// 	var use_card = 3;
				// }


				this.$post('/order/createOrder', {
					goods_id: this.product.id || 0,
					address_id: this.address.id,
					provider_id: this.provider_id || 0,
					type: this.product.express_type,
					pay_type: this.use_card == 2 ? 0 : this.pay_type,
					store_id: this.store_id,
					popularize_id: this.popularize_id,
					// 非按摩传 0
					// kefu: this.kefu == 1 ? 1 : 0,
					kefu: 0,
					use_card: this.use_card,
					pay_password: this.pay_password,
					remark: this.remark,
					circle_id: this.circle_id,
					service_time: this.service_time,
					express_type: this.product.express_type,
					day: this.day,
				}, false, (res => {
					if (res.code == 1) {
						// 现金支付
						this.pay_password = '';
						if (this.product.kefu == 1) {
							// 按摩
							this.buyAnmo(res.data.order_id);
						} else {
							// 实物
							this.buyShiwu(res.data.order_id);
						}
					} else if (res.code == 2) {
						// 余额卡全额支付
						this.$util.msg('支付成功');
						this.show_dj = false;
						uni.hideLoading();
						this.$util.toUrl(`/pages/create/paySuccess?order_id=${res.data.order_id}`,
							'redirectTo');
					} else if (res.code == 401) {
						// 输入卡密密码
						uni.hideLoading();
						this.show_dj = false;
						this.flag = true;
						this.$refs.numberPad.open()
					} else if (res.code == 402) {
						this.pay_password = '';
						this.$util.msg(res.msg);
						this.show_dj = false;
						this.flag = true;
						uni.hideLoading();
					} else {
						this.pay_password = '';
						this.flag = true;
						uni.hideLoading();
						this.$util.msg(res.msg)
					}
				})).then(res => {
					this.pay_password = '';
					this.flag = true;
					if (this.product.kefu == 1) {
						// 按摩
						this.buyAnmo(res.data.order_id);
					} else {
						// 实物
						this.buyShiwu(res.data.order_id);
					}
				});
			},

			// 按摩支付
			buyAnmo(order_id) {
				this.order_id = order_id;
				this.$native.orderPay({
					order_id: order_id,
					pay_type: this.pay_type,
					type: 1
				});
			},

			// 实物支付
			buyShiwu(order_id) {
				uni.hideLoading();
				this.order_id = order_id;
				// fare：路费
				// step：支付步骤【0：非按摩商品，1：按摩商品支付定金，2：按摩商品支付尾款】
				this.$native.orderPay({
					order_id: order_id,
					pay_type: this.pay_type,
					type: 1
				});
			},

			// 购物卡验证密码
			enterSuccess(e) {
				this.showKeyBoard = false;
			},

			enterClose() {
				this.showKeyBoard = false;
			},

			paySuccess() {
				this.$util.msg('支付成功');
				this.show_dj = false;
				uni.hideLoading();
				this.$util.toUrl(`/pages/create/paySuccess?order_id=${this.order_id}`, 'redirectTo');
			},

			payFail() {
				this.$util.msg('用户取消支付');
				uni.hideLoading();
			},

			onAddress(data) {
				// 原生回调
				this.address = JSON.parse(data);
				this.have_address = true;
			},

			getUserBalance() {
				this.$post('/user_balance/getUserBalance').then(res => {
					this.card_balance = res.data.tatal_price;
				});
			},

			getPayStatusAgain() {
				this.$post('/pay/get_pay_status', {
					order_id: this.order_id,
					// type 4 推广
					type: 1,
				}, false);
			},

			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},

			filter(type, options) {
				if (type === 'minute') {
					// return options.filter((option) => option == '00')
				}

				return options;
			},

			onDateTime(e) {
				this.day = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.service_time = this.$u.timeFormat(e.value, 'hh:MM');
				this.date_time_show = false;
			},

			getInitTime() {
				this.minDate = Number(new Date()) + 3600000;
				this.maxDate = this.minDate + 604800000;
				this.day = this.$u.timeFormat(this.minDate, 'yyyy-mm-dd');
				this.service_time = this.$u.timeFormat(this.minDate, 'hh:MM');
			},

			getList(flag = false) {
				this.$get('/provider/getProviderList', {
					store_id: this.store_id,
					page: this.page,
					provider_id: this.provider_id,
					circle_id: this.circle_id,
					type: 2,
					lat: this.lat,
					lng: this.lng,
				}).then(res => {
					if(flag){
						this.list = [];
					}
					this.list.push(...res.data.data);
					this.total = res.data.total;
					if (this.page == 1 && this.list.length) {
						this.provider_id = this.list[0].id;
					}
				});
			},

			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList(false);
				}
			},

			getProductList() {
				this.$get('/store_goods/getNewStoreGoodsList', {
					store_id: this.store_id,
					page: this.product_page,
					circle_id: this.circle_id,
					goods_id: this.goods_id
				}).then(res => {
					this.product_total = res.data.total;
					this.product_list.push(...res.data.data);
					if (this.product_list.length && this.product_page == 1) {
						this.product = this.product_list[0];
					}
				});
			},

			onReachProduct() {
				if (this.product_total > this.product_list.length) {
					this.product_page++;
					this.getProductList();
				}
			},

			getAnmoVipConfig() {
				this.$get('/circle.circle/getCircleEasyInfo?=19',{
					circle_id: this.circle_id
				}).then(data=>{
					this.circle_info = data.data;
					if(data.data.type == 3){
						this.$get('/circle.circle_vip/getAnmoVipConfig', {
							circle_id: this.circle_id
						}).then(res => {
							this.vip_status = 0;
							var is_vip = res.data.member_info.is_vip || 0;
							var config_type = res.data.member_info.config_type || 0;
							this.circle_info = res.data.circle_info;
							this.goods_discount = res.data.goods_discount / 100;
							if (is_vip == 1) {
								// if (['vip_year_price', 'vip_forever_price'].includes(config_type)) {
									this.vip_status = 1;
								// }
							}
						});
					}
					
				})
			},
			
			getLocation(json) {
				var data = JSON.parse(json);
				this.lat = data.lat || '';
				this.lng = data.lng || '';
				this.province = data.province || '';
				this.city = data.city || '';
				this.area = data.area || '';
				uni.setStorageSync('location', data);
				if(this.lat){
					this.$nextTick(()=>{
						this.getList(true);
					});
				}
			},
			
			back(){
				if(this.from_web == 1){
					this.$util.back();
				}else {
					this.$native.backAction();
				}
			},
			
			getAgreement(){
				this.$get('/order/getStoreConf',{
					store_id: this.store_id
				}).then(res=>{
					this.order_notice = res.data.order_notice;
				})
			},

		},

		onLoad(option) {
			this.goods_id = option.goods_id || 0;
			this.provider_id = option.provider_id || 0;
			this.store_id = option.store_id || 0;
			this.circle_id = option.circle_id || 0;
			this.from_web = option.from_web || 0;
			if (option.popularize_id != 'null') {
				this.popularize_id = option.popularize_id || 0;
			}
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.kefu = option.kefu || 0;
			this.getInitTime();

			this.getAddress();
			this.getUserBalance();

			this.getList(true);
			this.getProductList();

			this.getAnmoVipConfig();
			
			this.getAgreement();

			window.paySuccess = this.paySuccess;
			window.payFail = this.payFail;
			window.onAddress = this.onAddress;
			window.getAnmoVipConfig = this.getAnmoVipConfig;
			window.getLocation = this.getLocation;
			this.$native.getLocation();

		}
	}
</script>

<style lang="less" scoped>
	.create {
		padding: 0 32rpx 140rpx;
		min-height: 100vh;
		background: #F8F8F8;
	}

	.address {
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		align-items: flex-start;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
		}

		.content {
			flex: 1;
			overflow: hidden;

			.left {
				padding: 0 32rpx 0 16rpx;
				flex: 1;

				.top {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 40rpx;
					margin-bottom: 22rpx;
				}

				.bottom {
					font-size: 24rpx;
					color: #999999;
					line-height: 28rpx;
				}
			}
		}
	}

	.door {
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 32rpx;
		margin: 20rpx 0 0;

		text {
			font-size: 28rpx;
			color: #131313;
		}

		view {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.remark {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-top: 20rpx;

		.title {
			font-size: 28rpx;
			color: #131313;
			line-height: 32rpx;
		}

		.textarea {
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-top: 32rpx;

			textarea {
				height: 176rpx;
				font-size: 28rpx;
				color: #333;
			}

			.maxlength {
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: right;
			}
		}

	}

	.btn_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 132rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(230, 230, 230, 0.5);
		padding: 0 32rpx 32rpx;

		.right {
			min-width: 228rpx;
			height: 72rpx;
			background: #FD2A53;
			border-radius: 40rpx;
			padding: 0 16rpx;

			text {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.black {
			background: linear-gradient(153deg, #70727A 0%, #28292E 100%);
		}

		.left {
			.top {

				.vip-text {
					font-size: 28rpx;
					color: #FD2A53;
				}

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
				}

				.price {
					i {
						font-weight: 600;
						font-size: 28rpx;
						font-style: normal;
						color: #131313;
					}

					text {
						font-weight: 600;
						font-size: 28rpx;
						color: #131313;
					}
					
					image {
						width: 64rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}
				}
			}

			.bottom {
				font-size: 24rpx;
				color: #666666;
			}
		}

	}

	.sign {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 36rpx 32rpx;
		margin-top: 20rpx;

		.header {
			margin-bottom: 18rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
				line-height: 32rpx;
			}
		}

		.content {
			font-size: 26rpx;
			color: #666666;
			line-height: 40rpx;
		}
	}

	.dingjin {
		.dj_icon {
			position: relative;
			z-index: 2;

			image {
				width: 112rpx;
				height: 112rpx;
			}
		}

		.dj_content {
			padding: 92rpx 44rpx 44rpx;
			width: 616rpx;
			margin-top: -56rpx;
			background: #FFFFFF;
			border-radius: 40rpx;

			.dj_title {
				font-size: 32rpx;
				color: #131313;
				line-height: 44rpx;
			}

			.dj_price {
				font-weight: 600;
				font-size: 48rpx;
				color: #131313;
				line-height: 64rpx;
			}

			.dj_text {
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				text-align: center;
				margin: 32rpx 0 24rpx;
			}

			.dj_btn {
				width: 100%;

				view {
					width: 248rpx;
					height: 88rpx;
					border-radius: 44rpx;
					font-size: 28rpx;
					line-height: 88rpx;
					text-align: center;
				}

				.b {
					background: #F1F1F1;
					color: #333;
				}

				.r {
					background: #FD2A53;
					color: #FFFFFF;
				}
			}

		}
	}

	.to_pay_show {
		padding: 32rpx 32rpx 64rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.price {
			margin: 34rpx 0 24rpx;

			i {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
				font-style: normal;
			}

			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.pay_type {
			background: #F8F8F8;
			border-radius: 16rpx;
			width: 100%;
			margin: 0 32rpx 64rpx;

			.item {
				height: 100rpx;
				padding: 0 32rpx;

				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}

				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
						margin-right: 30rpx;
					}
				}
			}
		}

		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}

	.technician {
		padding: 30rpx 32rpx;
		margin-top: 36rpx;
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 24rpx;

		.content_title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			margin-bottom: 32rpx;
		}

		.list {
			#select {
				.avatar {
					border: 4rpx solid #FD2A53;
				}

				.select {
					display: flex;
				}

				text {
					color: #FD2A53;
				}

			}

			.item {
				margin-right: 24rpx;
				border: 4rpx solid transparent;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					position: relative;
					overflow: hidden;
					border-radius: 60rpx;
					border: 4rpx solid transparent;

					image {
						width: 112rpx;
						height: 112rpx;
						background: #D8D8D8;
					}

					.select {
						width: 112rpx;
						height: 32rpx;
						border-radius: 0 0 56rpx 56rpx;
						background: #FD2A53;
						position: absolute;
						bottom: 0;
						left: 0;
						display: none;
					}
				}

				.nickname {
					font-size: 28rpx;
					color: #131313;
					margin-top: 18rpx;
				}

				.juli {
					font-size: 24rpx;
					color: #666;
					margin-top: 8rpx;
				}
			}
		}
	}

	.product-list {
		width: 686rpx;
		overflow: hidden;
		flex-wrap: nowrap;
		margin-top: 20rpx;

		#select {
			background: #F9F1F3;
			border: 4rpx solid #FFDEE4;
		}

		.product {
			padding: 24rpx 32rpx;
			border-radius: 24rpx;
			margin: 0 20rpx;
			// min-width: 360rpx;
			height: 160rpx;
			background: #FFFFFF;
			border: 4rpx solid #FFFFFF;

			.image {
				flex-shrink: 0;
				width: 112rpx;
				height: 112rpx;
				background: #D8D8D8;
				border-radius: 24rpx;
				margin-right: 16rpx;
				overflow: hidden;

				image {
					width: 112rpx;
					height: 112rpx;
				}
			}

			.text {

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 32rpx;
				}

				.price {
					align-items: flex-end;

					i {
						font-weight: 600;
						font-size: 24rpx;
						color: #FD2A53;
						line-height: 30rpx;
						font-style: normal;
					}

					text {
						font-weight: 600;
						color: #FD2A53;
						font-size: 32rpx;
						line-height: 40rpx;
					}
				}

			}

		}

	}

	.agreement {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 20rpx;
		
		.agreement-tab {
			border-bottom: 2rpx solid #F1F1F1;
		}
		
		.agreement-content {
			padding: 32rpx;
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
		}
		
		.sign-text {
			padding: 32rpx;
		
			view {
				font-size: 28rpx;
				color: #131313;
			}
		
			text {
				display: block;
				font-size: 24rpx;
				color: #666666;
				margin-top: 6rpx;
			}
		}
	}

</style>